import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item {

        anchors.fill: parent

        Rectangle {
            id: rectleft
            color: 'red'
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: parent.width/3

            Rectangle {
                id: rectchildeft
                width: 50
                height: 50
                color: "yellow"

                //锚点布局
                anchors.right: parent.right //右部对其
                anchors.verticalCenter: parent.verticalCenter//垂直居中于父对象的中间，就是垂直居中
                //anchors.verticalCenter: parent.top//垂直居中于父对象的上边，则在顶上仅显示一半

                //anchors.centerIn: parent //中心
                //anchors.fill: parent //填充父对象

            }
        }

        Rectangle {
            id: rectcenter
            color: 'green'
            anchors.left: rectleft.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: rectleft.width

            Rectangle {
                id: rectchildcenter1
                anchors.fill: parent
                anchors.topMargin: 30
                anchors.leftMargin: 30
//                anchors.rightMargin: 30
//                anchors.bottomMargin: 30
                color: 'orange'
                Component.onCompleted: {
                    console.log(rectchildcenter1.width, rectchildcenter1.height)
                }
            }
            Rectangle {
                id: rectchildcenter2
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                height: rectchildcenter1.anchors.leftMargin
                color: 'black'
            }
            Rectangle {
                id: rectchildcenter3
                anchors.top: rectchildcenter2.bottom
                anchors.left: parent.left
                anchors.right: rectchildcenter1.left
                anchors.bottom: parent.bottom
                color: 'white'
            }
        }

        Rectangle {
            id: rectright
            color: 'blue'
            anchors.left: rectcenter.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: rectleft.width
        }
    }
}
